<template>
    <div>
        <user-top :title="msg"></user-top>
        <div class="findBody">
          <div class="name">
            <span>姓名</span>
            <input type="text" v-model="finds.name" placeholder="请输入姓名">
            <p>通讯录</p>
          </div>
          <div class="name">
            <span>电话</span>
            <input type="number" v-model="finds.phone" placeholder="请输入电话" id="phone">
            <p></p>
          </div>
          <div class="name">
            <span>省市区</span>
            <input type="text" v-model="finds.place" placeholder="请输入省市区">
            <p></p>
          </div>
          <div class="name">
            <span>详细地址</span>
            <input type="text" v-model="finds.address" placeholder="请输入详细地址">
            <p></p>
          </div>
        </div>
        <div class="findTitle" @click="openClick">
          <div class="title">
            <span>设置标签</span>
            <div class="title-button">
              <button>亲人</button>
              <button>朋友</button>
              <button>客户</button>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="saveButton">
          <button class="save" @click="save1Click">保存</button>
        </div>
        

        <div class="findAll" v-show="isShow" @click="aClick"></div>

        <div class="setTitle">
          <div class="titleset">设置标签</div>
          <div class="placeTitle">
            <p>地址标签</p>
            <div class="buttons">
              <button>家</button>
              <button>公司</button>
              <button>学校</button>
            </div>
          </div>
          <div class="placeTitle">
            <p>关系标签</p>
            <div class="buttons">
              <button>亲人</button>
              <button>朋友</button>
              <button>客户</button>
            </div>
          </div>
          <button @click="saveClick">保存</button>
        </div>
    </div>
</template>

<script>
import UserTop from "@/components/userMine/usertop.vue"
export default {
  data () {
    return {
      msg: '新建联系人地址',
      index: 2,
      isShow:false,
      finds: {
        id: '',
        name : '',
        phone : '',
        place: '',
        address: '',
      }
      
    };
  },
  components: {
    UserTop
  },
  methods: {
    openClick(){
      var setTitle = document.querySelector(".setTitle");
      if(setTitle.style.display=="block"){
          setTitle.style.display = "none";
          this.isShow = !this.isShow
      }else{
          setTitle.style.display = "block";
          this.isShow = !this.isShow
      }
    },
    aClick(){
      this.isShow = !this.isShow;
      var setTitle = document.querySelector(".setTitle");
      setTitle.style.display = "none";
    },
    save1Click(){
      if((this.finds.name==='')||(this.finds.phone==='')||(this.finds.place==='')||(this.finds.address==='')){ 
         this.$message({
            message: '请输入正确信息',
            type: 'warning'
        })
      }else{
        if(!(/^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(this.finds.phone))){ 
          this.$message({
              message: '请输入正确的电话号码！',
              type: 'warning'
          })
        }else{
          this.$http.post('/api/add_address', this.finds)
          .then((data) => {
            console.log(data);
            if (data.status == 200) {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.$router.push('/address')
            }
          })
        }
      }
    },
    saveClick() {
      this.isShow = !this.isShow;
      var setTitle = document.querySelector(".setTitle");
      setTitle.style.display = "none";
    }
  },
  mounted() {
      this.finds.id = window.sessionStorage.getItem('phonenum');
  }
}
</script>

<style lang="scss" scoped>
 .findBody{
   background-color: #fff;

   .name{
      display: flex;
      justify-content: space-between;
      padding: 20px 20px;
      margin: 0 10px;
      border-bottom: 1px solid #f1e9e9;

     span{
       font-size: 29px;
       font-weight: 500;
       width: 120px;
     }

     input{
       border: none;
       outline: medium;
       height: 40px;
       width: 400px;
     }

     p{
       display: inline-block;
       color: cornflowerblue;
       width: 80px;
     }
   }
 }

.findAll{
    position: absolute;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    width: 100%;
    height: 100%;
}
.saveButton{
  text-align: center;
  .save{
    margin: 30px 0 10px 0;
    width: 500px;
    height: 80px;
    color: #fff;
    background-color: cornflowerblue;
    border: none;
    border-radius: 50px;
    font-size: 24px;
    outline: none;
  }
}


 .findTitle{
   background-color: #fff;
   margin: 10px 0;

   .title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      margin: 0 10px;
      border-bottom: 1px solid #f1e9e9;

     span{
       font-size: 29px;
       font-weight: 500;
       width: 120px;
     }

     .title-button{
       button{
        border: 1px solid #f1e9e9;
        background-color: #fff;
        border-radius: 25px;
        padding: 5px 15px;
        margin: 0 10px 0 5px;
        outline: medium;
       }

       i{
        font-size: 36px;
        color: #a9bfbf;
        margin-left: 10px;
       }
     }
   }
 }
 .buttonChange{
    border: 1px solid #52c6ee;
    background-color: #d6dcf178;
    color: cornflowerblue;
 }
 .setTitle{
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    bottom: 0;
    position: absolute;
    display: none;
    width: 100%;
    box-sizing: border-box;
   .titleset{
     font-size: 25px;
     text-align: center;
     font-weight: 600;
   }
   button{
     margin: 30px 0 10px 0;
     width: 700px;
     height: 80px;
     color: #fff;
     background-color: cornflowerblue;
     border: none;
     border-radius: 50px;
     font-size: 24px;
   }
   .placeTitle{
     p{
       margin: 10px 0;
     }
     .buttons{
       display: flex;
       justify-content: space-around;

       button{
        padding: 10px 50px;
        border: 1px solid #f1e9e9;
        background-color: #fff;
        border-radius: 25px;
        font-size: 20px;
        width: 215px;
        color: #000;
      }
     }
     
   }
   
 }
</style>